<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>么伟无敌</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            position: relative;
            width: 500px;
            height: 500px;
            border: 2px solid #000;
        }

        .xiahua {
            width: 500px;
            background-color: #000;
            position: fixed;
            top: 250px;
            left: 0;
            border: 1px solid #000;
        }

        .box1 {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 50px;
            height: 50px;
            background-color: tomato;
            text-align: center;
            align-items: center;
            line-height: 50px;
            cursor: move;
        }

        .box2 {
            position: absolute;
            top: 10px;
            left: 100px;
            width: 50px;
            height: 50px;
            background-color: tomato;
            text-align: center;
            align-items: center;
            line-height: 50px;
            cursor: move;
        }

        .box3 {
            position: absolute;
            top: 10px;
            left: 190px;
            width: 50px;
            height: 50px;
            background-color: tomato;
            text-align: center;
            align-items: center;
            line-height: 50px;
            cursor: move;
        }

        .box4 {
            position: absolute;
            top: 10px;
            left: 280px;
            width: 50px;
            height: 50px;
            background-color: tomato;
            text-align: center;
            align-items: center;
            line-height: 50px;
            cursor: move;
        }

        .box5 {
            position: absolute;
            top: 10px;
            left: 370px;
            width: 50px;
            height: 50px;
            background-color: tomato;
            text-align: center;
            align-items: center;
            line-height: 50px;
            cursor: move;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
    </div>
    <div class="xiahua"></div>
</body>
<script>
    window.onload = function () {
        // 先获取整个大盒子
        let box = document.querySelector('.box')
        console.log(box)
        console.log(box.clientWidth)
        console.log(box.clientHeight)
        // 拖拽的三个事件 点击按住事件 还有 移动事件  然后 就是 松开事件
        // 这里直接运用大盒子 来做 事件委托 就可以 通过大盒子里面 直接拿到 小盒子的dom
        box.onmousedown = function (e) {
            // console.log(e)
            const left = e.path[0].offsetLeft
            const top = e.path[0].offsetTop
            console.log(left, top)
            let x = e.pageX - e.path[0].offsetLeft
            let y = e.pageY - e.path[0].offsetTop
            // console.log(x, y)
            // e.pageX,e.pageY 是鼠标点击 相对于整个大盒子里面的  x轴和y轴的距离
            // console.log(e.pageX, e.pageY)
            // 因为是事件委托 所以可以在大盒子当中 拿到 小盒子的元素 e.path[0]
            // e.path[0].offsetLeft 是小盒子 当前 距离整个大盒子的 x轴和y轴方向上的距离
            // console.log(e.path[0].offsetLeft, e.path[0].offsetTop)
            // console.log(e.path[0])
            e.path[0].onmousemove = function (e) {
                // console.log(e)
                e.path[0].style.left = e.pageX - x + 'px';
                e.path[0].style.top = e.pageY - y + 'px';
            }
        }

        // 在全局外面 拿到 大盒子里面的所有 小盒子
        let obj = box.getElementsByTagName('div')
        console.log(obj)
        // 定义一个数组
        let arr = []
        // 用for循环来 拿到 盒子里面的html 内容
        for (let i = 0; i < obj.length; i++) {
            // console.log(i)
            // console.log(obj)
            console.log(obj[i].innerHTML)
            // 将html  内容 传入 到整个数组当中
            arr.push(obj[i].innerHTML)
        }
        console.log(arr)
        // ES6语法当中的 数组中最小值的方法
        let min = Math.min(...arr)
        console.log(min)
        // 在定义一个全局的数组
        let arr1 = []
        box.onmouseup = function (e) {
            console.log(e)
            // 当鼠标点击松开的时候 判断 pageX 的大小 有没有 超过box 盒子的 宽高 如果超过 就 给予提示 并且 刷新页面
            if (e.pageX > box.clientWidth || e.pageY > box.clientHeight) {
                // 提示用户
                alert('超过去了！');
                // 刷新
                location.reload();
            } else {
                console.log(e.path[0].innerHTML)
                if (e.path[0].innerHTML > min) {
                    alert('请按照从小到大开始排序哦')
                    location.reload();
                }
                else {
                    // 查看 e.pageY距离到下面 片区的大概位置
                    if(e.pageY > 206){
                        min = min + 1
                    console.log(min)
                    // 每次拖拽一个盒子到 对应范围内 就 添加 内容到 arr1 数组当中
                    arr1.push(e.path[0].innerHTML)
                    console.log(arr1, '这是arr1')
                    console.log(arr, '这是arr')
                    // 当两个数组的数相同时就提示 用户 成功
                    if (arr.length == arr1.length) {
                        alert('你成功了')
                        location.reload();
                    }
                    // 当鼠标 松开的时候 解开 小盒子的移动事件
                    e.path[0].onmousemove = null
                    }else{
                        alert('请放在下面范围内')
                        location.reload();
                    }

                }

            }

        }
    }
</script>

</html>